<template>
    <el-tabs v-model="activeName" class="demo-tabs" >
    <el-tab-pane label="权限列表" name="list">
        <Table :request="powerList">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="权限名称" width="" />
        <el-table-column prop="path" label="权限路由" width="" />
        <el-table-column prop="" label="权限级别" width=""  >
            <template #default="{row}">
               <el-tag :type="row.parentId?'success':''">
                {{row.parentId?'二级':'一级'}}权限
               </el-tag>
            </template>
        </el-table-column>

    
      </Table>
    </el-tab-pane>
    <el-tab-pane label="权限分类" name="tree">
        <el-table 
         row-key="id"
        :data="tree"
        style="width: 100%"
        border
        height="500"
        >
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="权限名称" width="" />
        <el-table-column prop="path" label="权限路由" width="" />
        <el-table-column prop="" label="权限级别" width=""  >
            <template #default="{row}">
               <el-tag :type="row.parentId?'success':'primary'">
                {{row.parentId?'二级':'一级'}}权限
               </el-tag>
            </template>
        </el-table-column>
    
        </el-table>
    </el-tab-pane>
   
  </el-tabs>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { powerList, powerTree } from '../../api/system';
import {Table} from "../../components"
const tree=ref<TreeItem[]>([])
const list=ref<ListItem[]>([])
const activeName=ref<string>("list")
const getTree=async ()=>{
  let res:ResData=await powerTree() as ResData
  if(res.code==200){
     tree.value=res.data as TreeItem[]
  }
}
const getList=async ()=>{
  let res:ResData=await powerList() as ResData
  if(res.code==200){
     list.value=res.data as ListItem[]
  }
}

onMounted(()=>{
    getList()
    getTree()
})
</script>
<style scoped >
</style>
